//给元素添加绑定事件的
// const p1 = document.getElementById("p1");
// p1.addEventListener("click", (event) => {
//   console.log(event);
//   console.log("p1 被点击了");
// });

/**
 * 给元素绑定事件
 * @param {*} elem 被绑定的元素
 * @param {*} type 事件的类型
 * @param {*} fn 执行的回调函数
 */
function bindEvent(elem, type, fn) {
  elem.addEventListener(type, fn);
}

const div1 = document.getElementById("div1");
const p1 = document.getElementById("p1");
bindEvent(div1, "click", (e) => {
  console.log("e.target就是当前点击的元素", e.target.innerHTML);
  console.log("div1被点了");
});
// bindEvent(p1, "click", (e) => {
//   console.log("p1被点了");
// });
// bindEvent(document.body, "click", (e) => {
//   console.log("body被点了");
// });
// bindEvent(document, "click", (e) => {
//   console.log("document被点了");
// });

/**
 *
 * @param {*} elem 元素
 * @param {*} type 事件类型
 * @param {*} selector 选择器
 * @param {*} fn 回调函数
 */
function bindEventComplex(elem, type, selector, fn) {
  // 传了3个参数
  if (fn == null) {
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type, (event) => {
    const { target } = event;
    if (selector) {
      //   有代理
      //   该元素是否符合 该 selector 选择器
      if (target.matches(selector)) {
        fn.call(target, event);
      }
    } else {
      fn.call(target, event);
    }
  });
}
